<template>
	<view class="page p_md">

		<u--form labelPosition="left" :model="formModel" :rules="rules" ref="uForm">
			<view class="section pitch_default">
				<view class="row card radius_default px_default py_xs">
					<u-form-item prop="introduce">
						<u--textarea v-model="formModel.introduce" height="120" placeholder="请输入商品介绍" border="none"></u--textarea>
					</u-form-item>
					<u-form-item>
						<u-upload :fileList="[]" accept="image/*" :maxCount="1" @afterRead="uploadAction"></u-upload>
					</u-form-item>
				</view>
				<view class="row card radius_default px_default py_xs">
					<Picker label="商品类型" placeholder="请您选择商品类型" :actions="actions" v-model="formModel.type" prop="type" />
					<Picker label="发布区域" placeholder="请您选择发布区域" :actions="actions" v-model="formModel.region" prop="region" />
					<u-form-item label="价格" prop="price" borderBottom  labelWidth="100">
						<u--input v-model="formModel.price" placeholder="请输入价格" border="none"></u--input>
					</u-form-item>
					<u-form-item label="手机号" prop="phone"  labelWidth="100">
						<u--input v-model="formModel.phone" placeholder="请输入手机号" border="none"></u--input>
					</u-form-item>
				</view>

				<view class="row">
					<u-button type="primary" shape="circle" text="按钮形状" @click="submit"></u-button>
				</view>
			</view>
		</u--form>

	</view>
</template>

<script>
	import {
		getGoodList,
		createGood
	} from '../../api/good.api';

	import Picker from '../../components/picker/picker.vue';

	const defaultFormModel = {
		introduce: '',
		type: undefined,
		region: undefined,
		price: '',
		phone: '',
		picture: [],
	};
	export default {
		components: {
			Picker
		},
		data() {
			return {
				actions: [{
						name: '杭州',
						value: 'Hangzhou'
					},
					{
						name: '宁波',
						value: 'Ningbo'
					},
					{
						name: '温州',
						value: 'Wenzhou'
					},
					{
						name: '绍兴',
						value: 'Shaoxing'
					},
					{
						name: '湖州',
						value: 'Huzhou'
					},
				],

				formModel: {
					introduce: '',
					type: undefined,
					region: undefined,
					price: '',
					phone: '',
					picture: [],
				},
				rules: {
					introduce: {
						type: 'string',
						required: true,
						message: '请输入商品介绍',
						trigger: ['blur', 'change']
					},
					type: {
						type: 'string',
						required: true,
						message: '请您选择商品类型',
						trigger: ['blur', 'change']
					},
					region: {
						type: 'string',
						required: true,
						message: '请您选择发布区域',
						trigger: ['blur', 'change']
					},
					price: {
						type: 'string',
						required: true,
						message: '请输入价格',
						trigger: ['blur', 'change']
					},
					phone: {
						type: 'string',
						required: true,
						message: '请输入手机号',
						trigger: ['blur', 'change']
					},

				}
			}
		},
		methods: {
			submit() {
				this.$refs.uForm.validate().then(isVerify => {
					if (isVerify) {
						createGood(this.formModel).then(() => {
							this.formModel = {
								...defaultFormModel
							};
							this.$refs.uForm.clearValidate();
						});
					}
				})
			},

			uploadAction(event) {
				const formData = new FormData();
				formData.append('file', event.file);
				debugger
				uni.request({
					url: '你的接口地址',
					method: 'POST',
					header: {
						'Content-Type': 'multipart/form-data',
					},
					data: formData,
					success(res) {

					},
					fail() {
						uni.showToast({
							icon: 'fail',
							title: '图片上传失败',
							duration: 1000
						});
					}
				});
			},

		},
		mounted() {
			getGoodList().then(result => {
				console.log('result', result)
			})


		}
	}
</script>

<style>
	.card {
		background: #fff;
	}
</style>